<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>登陆</title>

    <%--	<%@include file="/WEB-INF/views/commons/commons.jsp" %>--%>
    <link href="/static/css/index.css" rel="stylesheet" type="text/css"/>
    <script src="/static/js/plugins/jquery-easyui/jquery.min.js"></script>
    <script src="/static/js/plugins/jquery-easyui/jquery.easyui.min.js"></script>
    <script src="/static/js/plugins/jquery-easyui/locale/easyui-lang-zh_CN.js"></script>
    <script>
        $(function(){
            $("#login_sub").on("click",function(){
                $("#submitForm").form("submit",{
                    url:"/login",
                    success:function(data){
                        data = $.parseJSON(data);
                        if (data.success) {
                            window.location.href = "/index"
                        }else {
                           alert(data.msg);
                        }
                    }
                })
            })
        })
    </script>
    <style>
        body {
            overflow: hidden;
        }
        canvas {
            position: absolute;
            top: 0;
            left: 0;
            background-color: black;
        }
       /* a {
            width: 200px;
            height: 200px;
            position: absolute;
            left: calc( 100% - 200px );
            top: calc( 100% - 130px );
        }*/
        .myimg {
            width: 200px;
        }
    </style>
</head>
<body>

<canvas id=c></canvas>
<img src="/static/images/a-colours-circle-rainbow-HD-Wallpaper.jpg" class="myimg" >
<script src='/static/js/system/dat.gui.min.js'></script>


<!--面板-->
<div id="panel">
<form method="post" id="submitForm">
    <!--面板的头部-->
    <div class="panel-header" id="panel_header">
        <h2>会员管理系统</h2>
    </div>
    <!--面板的中间内容-->
    <div class="panel-content">

        <!--账号输入框-->
        <div class="user-pwd">
            <img src="/static/images/icon_people.png">
            <input placeholder="请输入用户名" name="username">
        </div>
        <!--密码输入框-->
        <div class="user-pwd">
            <img src="/static/images/icon_password.png">
            <input placeholder="请输入密码" type="password" name="password" id="pwd">
        </div>
        <!--默认的设置-->
        <div class="setting">
            <a href="#"><input type="checkbox"> 下次自动登录</a>
            <a href="#" class="pull-right">忘记密码?</a>
        </div>
        <!--登录按钮-->
        <input type="button" value="登录" id="login_sub" class="login-btn">
        <!--立即注册-->
        <div class="reg">
            还没账号?&nbsp;&nbsp;&nbsp;&nbsp;<a href="#" id = "register">立即注册</a>
        </div>
    </div>
    <!--面板的尾部-->
    <div class="panel-footer">
        <span>社交账号登录:  </span>
        <img class="imgsj" src="/static/images/sina.png" title="微博">
        <img class="imgsj" src="/static/images/weixin.png" title="微信">
        <img class="imgsj" src="/static/images/qq.png" title="QQ">
    </div>
</form>
</div>
<script src="/static/js/system/index2.js"></script>

<script>

    $(function () {
        $("#register").click(function () {

                   window.location.href ="/register.jsp"

        });

    });

    //1.找对象
    var panel = document.getElementById('panel');
    var panel_header = document.getElementById('panel_header');

    //2.在panel_header上添加鼠标按下事件
    panel_header.onmousedown = function (event) {
        //3.获取一个兼容的event
        var myEvent = event || window.event;
        //4.获取到初始的位置
        var beginX = myEvent.clientX - panel.offsetLeft;
        var beginY = myEvent.clientY - panel.offsetTop;

        //5.在文档区域上添加鼠标拖动事件

        document.onmousemove = function (event) {
            //6.获取一个兼容的event
            var myEvent = event || window.event;

            //7.获取最新的位置
            var endX = myEvent.clientX - beginX;
            var endY = myEvent.clientY - beginY;

            //8.走起来
            panel.style.left = endX + 'px';
            panel.style.top = endY + 'px';

            //10.防止拖动
            return false;
        }
        //9.当鼠标在文档区域抬起的时候,清掉之前的事件
        document.onmouseup = function () {
            document.onmousemove = null;
            document.onmouseup = null;
        }
        //防止拖动
        return false;
    }
</script>
</body>
</html>